import React from 'react'
import Action from '../../../action/action'
import Store from '../../../store/store'
import ReactMixin from 'react-mixin'
import Reflux from 'reflux'

import MessageBox from '../../../component/messageBox/messageBox'
import EmptyBox from '../../../component/emptyBox/emptyBox'
import SideNavBar from '../../../component/sideNavBar/sideNavBar'
export default class MyConcern extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            userInfo : {},
            showMessageBox :false,
            index : ""
        }
    }
    componentDidMount(){
        Action.getUserInfo()
    }
    cancelConcernBox(i){
        this.setState({
            showMessageBox:!this.state.showMessageBox,
            index : i
        });
    }
    cancelConcern(){
        Action.cancelConcern(this.state.index);
        this.cancelConcernBox();
    }
    render(){
        let list = [],
            userInfo = this.state.userInfo;
        userInfo.userConcern &&  userInfo.userConcern.map((item,i)=>{
            list.push(
                <li key={i}>
                    <div>
                        <div style={{backgroundImage:`url(${item.merchantLogo})`}}></div>
                        <h4>
                            <p>{item.merchantName}</p>
                            <span>{item.merchantText ? item.merchantText : "商户暂时没有更新状态~"}</span>
                        </h4>
                    </div>
                    <span>
                        <span onClick={this.cancelConcernBox.bind(this,i)}>取消关注</span>
                        <span>分享</span>
                    </span>
                </li>
            )
        });
        return(
            <ul className="myConcern">
                {list.length > 0 ? list : <EmptyBox type="noConcern" size="44%"/>}
                {this.state.showMessageBox ? <MessageBox type="0"
                                                         text="确认要取消关注商户吗?"
                                                         cancel={this.cancelConcernBox.bind(this)}
                                                         sure={this.cancelConcern.bind(this)}/> : ""}
                <SideNavBar/>
            </ul>
        )
    }
}
ReactMixin.onClass(MyConcern,Reflux.connect(Store));